import React, {Component} from 'react';
import {
    TouchableOpacity,
    StyleSheet,
    Platform,
    ActivityIndicator,
    View,
    Text,
    ToastAndroid,
    Modal,
    TouchableHighlight
} from 'react-native'

import Hr from 'react-native-hr'
import Util from '../utils/util';
import Color from '../constant/color';


export default class ModalDropdown extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: '0',
        }
    }

    componentDidMount() {
        this.clickEvent = this.props.clickEvent;
    }


    componentWillReceiveProps(props) {
        this.setState({
            modalVisible: props.modalVisible,
        })
    }


    onPressConfirm(text) {
        this.props.clickEvent(text);
    }

    onRequestClose() {
        Util.showToast('closed');
        this.setState({
            modalVisible: '0',
        })
    }

    render() {
        this.data = this.props.data;
        this.data.push('取消');

        return (
            <Modal
                animationType="slide"
                visible={this.state.modalVisible === '1'}
                onRequestClose={this.onRequestClose.bind(this)}
                transparent={true}
            >
                <View style={styles.container}>
                    {
                        this.data.map((item, i)=>{
                            return (
                                <View key={i} style={{
                                    width: '100%',
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                }}>
                                    <TouchableOpacity onPress={this.onPressConfirm.bind(this, item)}
                                                        style={{margin: 15}}>
                                        <Text style={{fontSize: 16}}>{item}</Text>
                                    </TouchableOpacity>
                                    <Hr lineColor={Color.grey}/>

                                </View>
                            );
                        })
                    }
                </View>
            </Modal>
        );
    }
}


const styles = StyleSheet.create({
    container:{
        position: "absolute",
        bottom: 0,
        flex: 1,
        backgroundColor: 'white',
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        width: '100%',
        borderTopWidth: 1,
        borderColor: Color.SPLIT_COLOR,
    }
})